<template>
    <div class="details" id="post_details_exclusive" v-if="contentList">
        <div class="left" v-if="detailsList">
            <div>
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item to="/post">旅游攻略</el-breadcrumb-item>
                  <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="title">
                <h1>{{contentList.title}}</h1>
            </div>
            <div class="content">
                <el-row class="read">
                    <el-col :span="7" :push="14">攻略: {{test.date(contentList.created_at)}}</el-col>
                    <el-col :span="4" :push="14">阅读: {{contentList.watch | read}}</el-col>
                </el-row>
                <el-row class="center">
                    <el-col class="matter" v-html="contentList.content"></el-col>
                </el-row>
                <el-row class="comment">
                    <el-button @click="changeData" :disabled="disabled1" class="iconfont icon" :class="data">点赞({{contentList.likeIds | likeLength}})</el-button>
                    <el-button class="iconfont iconpinglun icon" @click="$refs.input.focus()">评论({{contentList.comments.length}})</el-button>
                    <el-button @click="changeData2" :disabled="disabled2"  class="iconfont icon" :class="data2">收藏</el-button>
                    <el-button class="iconfont iconfenxiang icon" @click="fenXiang">分享</el-button>
                </el-row>
                 <el-row class="publish">
                    <h3>评论</h3>
                    <comment-btn :isShow="isShow" @hidden="handleHidden" :author="author"></comment-btn>
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="说点什么吧..."
                      v-model="textarea" 
                      resize="none" 
                      ref="input"
                    >
                    </el-input>
                    <el-button type="primary" size="mini" @click="handleSubmit">提交</el-button>
                    <el-upload
                      :action="$axios.defaults.baseURL +'/upload'"
                      name="files"
                      list-type="picture-card"
                      :on-success="handleSuccess"
                      ref="elUpload"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog >
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-row>
                <div class="comList" v-if="total>0">
                    <comment-item 
                        @handleReplys="handleReply"
                        v-for="(item,index) in detailsList"
                        :key="index"
                        :postItem="item"
                        :date="test.date(item.created_at)"
                        @dianzan="dianzan"
                    />
                </div>
                <div class="foot" v-if="total==0">
                    暂无评论,赶紧抢占沙发
                </div>
                <el-pagination
                    v-if="total>0"
                    background
                    layout="total,sizes,prev,pager,next,jumper"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="current"
                    :page-sizes=[3,5,7,9]
                    @size-change="sizeChange"
                    @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>
        <div class="right" v-if="rightList">
            <p class="border title">相关攻略</p>
            <a class="router" 
                v-for="(item,index) in rightList" 
                :key="index" 
                :href="'/post/details?city='+item.id"
            >  
                <div class="list border" v-if="item.images[0]">
                    <img :src="item.images[0]" alt="">
                    <div class="city has_photo" >
                        <div class="top">{{item.title}}</div>
                        <p>{{test.date(item.updated_at)}}  阅读 {{item.watch | read}}</p>
                    </div>
                </div>
                <div class="list border" v-else>
                    <div class="city">
                        <div class="top">{{item.title}}</div>
                        <p>{{test.date(item.updated_at)}}  阅读 {{item.watch | read}}</p>
                    </div>
                </div>
            </a>
            
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
          nowDate1:0,
          nowDate2:0,
          disabled1:false,
          disabled2:false,
          data:'iconding',
          data2:'iconstar1',
          textarea:'',
          dialogImageUrl: '',
          isShow:false,
          detailsList:null,
          author:'',
          contentList:null,
          rightList:null,
          parentId:{},
          pageSize:3,
          current:1,
          total:0,
          pics:[],
          token:this.$store.state.user.token
      };
    },
    filters:{
        likeLength(str) {
            if (str===null) {
               str = {}
               str.length = 0
               return str.length
            }else {
                return str.length
            }
        },
        read(str) {
            if (str===null) {
                return 0
            }else {
                return str
            }
            
        }
    },
    mounted() {
        // 右边推荐文章详情
        this.$axios.get('/posts/recommend',{id:this.$route.query.city})
        .then(res=>{
            console.log(res.data.data);
            this.rightList = res.data.data
        })
        this.init()
        // 评论列表
        this.comment()
      
    },
    methods: {
        init() {
            //文章详情渲染
            this.$axios.get('/posts',{params:{id:this.$route.query.city}}).then(res=>{
                this.contentList = res.data.data[0]
                console.log(this.contentList);
                // this.contentList.length
            })
        },
        // 评论列表初始化并分页
        comment() {
            this.$axios.get('/posts/comments',{params:{post:this.$route.query.city,_start:(this.current-1)*this.pageSize,_limit:this.pageSize}})
            .then(res=>{
                // console.log(res);
                this.total = res.data.total
                this.detailsList = res.data.data
            })
        },
        // 上传文件
        handleSuccess(res, file, fileList) {
          this.pics.push(res[0])
          this.dialogVisible = true;
          
        },
        changeData() {  
            let now = new Date().valueOf()
            switch(now-this.nowDate1>5000) {
                case true:
                    if (this.data == 'iconding') {
                        this.data = "iconpraise2"
                        this.$message({message:'文章点赞成功',type: 'success'}) 
                        +this.contentList.likeIds.length++
                    }else {
                        this.data = 'iconding'
                        this.$message({message:'文章取消点赞成功',type: 'success'})
                        +this.contentList.likeIds.length--
                    }
                    this.nowDate1 = now
                    break;
                case false:
                    this.$message({message:'请不要频繁点击, 5秒后再进行此操作',type: 'warning'})
                    this.disabled1=true
                    break;
                default:   
            }
            setTimeout(()=>{
                this.disabled1 = false
            },5000)
        },
        changeData2() {
            let now = new Date().valueOf()
            switch(now-this.nowDate2>5000) {
                case true:
                    if (this.data2== 'iconstar1') {
                        this.data2 = "iconstar"
                        this.$message({message:'文章收藏成功',type: 'success'}) 
                    }else {
                        this.data2 = 'iconstar1'
                        this.$message({message:'文章取消收藏成功',type: 'success'})
                    }
                    this.nowDate2 = now
                    break;
                case false:
                    this.$message({message:'请不要频繁点击, 5秒后再进行此操作',type: 'warning'})
                    this.disabled2=true
                    break;
                default:   
            }
            setTimeout(()=>{
                this.disabled2 = false
            },5000)
        },
        fenXiang() {
            this.$message({message:'暂不支持分享',type:"warning"})
        },
        // 提交评论
        handleSubmit(){
            // console.log(this.pics);
            if(!this.textarea && !this.pics[0]) {
                this.$message.error('评论内容不能为空')
                return
            }
            const {token} = this.$store.state.user
            const data = {content:this.textarea,pics:this.pics,post:this.$route.query.city,follow:this.parentId.follow}
            this.$axios.post('/comments',data,{
                headers:{
                    Authorization:'Bearer ' + token
                }
            })
            .then(res=>{
                this.textarea = ''
                this.pics = []
                this.$refs.elUpload.clearFiles()
                this.isShow = false
                this.parentId.follow = null
                this.$message({
                    message: '消息发送成功',
                    type: 'success'
                })
                this.comment()
            })
        },
        //监听作者并显示按钮
        handleReply(res) {
            console.log(res);
            this.parentId = res
            this.isShow = true
            this.author = this.parentId.author
        },
        dianzan() {    
            this.$message({message:'暂未开发',type: 'warning'})
        },
        sizeChange(index) {
            this.pageSize = index
            this.comment()
        },
        currentChange(index) {
            this.current = index
            this.comment()
        },
        handleHidden() {
            this.isShow=false
            this.parentId.follow = null
        }
    },
}
</script>

<style lang="less" scoped>
.details {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: auto;
    .left {
        width: 700px;
        .el-breadcrumb {
            height: 50px;
            line-height: 50px;
        }
        .title {
            h1 {
                margin-bottom: 20px;
            }
        }
        .content {
            line-height: 1.5;
            .read {
                height: 66px;
                line-height: 66px;
                border-top: 1px solid #ccc;
                .el-col {
                    color: #a699a6;
                }
            }
            .matter {
                line-height: 24px;
            }
            .comment {
                margin:40px 0 10px ;
                text-align: center;     
                .icon {
                    position: relative;
                    display: inline-block;
                    width: 74px;
                    height:70px ;
                    line-height: 94px;
                    font-size: 14px;
                    color: #999999;
                    &::before {
                        position: absolute;
                        left: 50%;
                        top: -34px;
                        transform: translateX(-50%);
                        font-size: 30px;
                        color: #ffa500;
                        text-align: center;
                        width: 53px;
                    }
                }
                .el-button {
                    border: none;
                    outline: none;
                    padding: 0;
                    &:hover {
                        background-color: #fff;
                        cursor: pointer;
                    }
                }
                .iconstar1 {
                    &::before {
                        font-size: 38px;
                    }
                }
            }
            .publish {
                margin-bottom:40px ;
                h3 {    
                    margin:10px 0 20px;
                    font-weight: normal;
                }
                .el-button {
                    float: right;
                }
                .el-textarea {
                    margin: 10px 0;
                }
                
            }
            .comList {
                border: 1px solid #ccc;
                .comments {
                    &:not(:first-child) {
                        border-top: 1px dashed #ccc !important;
                    }
                }
            }
            .el-pagination {
                margin: 20px 0 30px;
                text-align: center;
            }
        }
        .foot {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px dashed #ccc;
            margin-bottom: 30px;
        }
    }
    .right {
        width: 280px;
        .border {
            border-bottom:1px solid #ccc;
        }
        .title {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
        }
        .router {
            display: block;
            .list {
                display: flex;
                padding: 20px 0; 
                    img {
                        width: 100px;
                        height: 80px;
                        margin-right: 10px;
                        object-fit: cover;
                    }
                .city {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 80px;
                    .top {
                        font-size: 16px;
                        width: 260px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-bottom: 20px;
                    }
                    p {
                        color: #999999;
                        font-size: 12px;
                    }
                    &.has_photo {
                        width: 160px;
                        .top {
                            width: 160px;
                        }
                    }
                }
                
            }
        }
    }
}
</style>
<style lang="less">
#post_details_exclusive {
    .left {
        .content {
            .center {
                p {
                    margin: 10px 0;
                    img {
                        display: block;
                        max-width: 700px !important;
                        object-fit: contain !important;  
                    }    
                    
                }
                
            }
            .publish {
                .el-upload--picture-card {
                    width: 100px !important;
                    height: 100px !important;
                    line-height: 100px !important;
                }
                .el-upload-list--picture-card .el-upload-list__item {
                    width: 100px !important;
                    height: 100px !important;
                }
            }
        }
    }
}
.el-message {
    top:20px !important;
}
</style>